<template>
  <div class="test-pinia">
    <h2>Pinia 状态管理测试页面</h2>
    
    <!-- 用户状态显示 -->
    <div class="status-section">
      <h3>当前用户状态</h3>
      <div class="status-info">
        <p><strong>登录状态:</strong> {{ userStore.isLoggedIn ? '已登录' : '未登录' }}</p>
        <p><strong>认证状态:</strong> {{ userStore.isAuthenticated ? '已认证' : '未认证' }}</p>
        <p><strong>用户名:</strong> {{ userStore.userName || '未设置' }}</p>
        <p><strong>用户ID:</strong> {{ userStore.userId || '未设置' }}</p>
        <p><strong>用户角色:</strong> {{ userStore.userRole || '未设置' }}</p>
        <p><strong>Token:</strong> {{ userStore.token ? '已设置' : '未设置' }}</p>
      </div>
    </div>

    <!-- 用户信息详情 -->
    <div v-if="userStore.userInfo" class="user-details">
      <h3>用户详细信息</h3>
      <pre>{{ JSON.stringify(userStore.userInfo, null, 2) }}</pre>
    </div>

    <!-- 操作按钮 -->
    <div class="actions-section">
      <h3>操作测试</h3>
      
      <!-- 登录测试 -->
      <div class="action-group">
        <h4>登录测试</h4>
        <div class="form-group">
          <input v-model="testUsername" placeholder="测试用户名" class="input-field" />
          <input v-model="testPassword" type="password" placeholder="测试密码" class="input-field" />
          <button @click="testLogin" class="btn btn-primary">测试登录</button>
        </div>
      </div>

      <!-- 注册测试 -->
      <div class="action-group">
        <h4>注册测试</h4>
        <div class="form-group">
          <input v-model="testRegUsername" placeholder="注册用户名" class="input-field" />
          <input v-model="testRegPassword" type="password" placeholder="注册密码" class="input-field" />
          <input v-model="testRegPhone" placeholder="手机号" class="input-field" />
          <input v-model="testRegCode" placeholder="验证码" class="input-field" />
          <button @click="testRegister" class="btn btn-success">测试注册</button>
        </div>
      </div>

      <!-- 验证码测试 -->
      <div class="action-group">
        <h4>验证码测试</h4>
        <div class="form-group">
          <input v-model="testPhone" placeholder="手机号" class="input-field" />
          <button @click="testGetCode" class="btn btn-info">获取验证码</button>
        </div>
      </div>

      <!-- 其他操作 -->
      <div class="action-group">
        <h4>其他操作</h4>
        <div class="form-group">
          <button @click="testUpdateUserInfo" class="btn btn-warning">更新用户信息</button>
          <button @click="testAutoLogin" class="btn btn-secondary">测试自动登录</button>
          <button @click="testLogout" class="btn btn-danger">测试登出</button>
        </div>
      </div>
    </div>

    <!-- 操作日志 -->
    <div class="log-section">
      <h3>操作日志</h3>
      <div class="log-container">
        <div v-for="(log, index) in logs" :key="index" class="log-item" :class="log.type">
          <span class="log-time">{{ log.time }}</span>
          <span class="log-message">{{ log.message }}</span>
        </div>
      </div>
      <button @click="clearLogs" class="btn btn-sm">清空日志</button>
    </div>
  </div>
</template>

<script>
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'

export default {
  name: 'TestPinia',
  data() {
    return {
      testUsername: 'testuser',
      testPassword: 'password123',
      testRegUsername: 'newuser',
      testRegPassword: 'password123',
      testRegPhone: '13800138000',
      testRegCode: '123456',
      testPhone: '13800138000',
      logs: []
    }
  },
  computed: {
    userStore() {
      return useUserStore()
    }
  },
  methods: {
    addLog(message, type = 'info') {
      const time = new Date().toLocaleTimeString()
      this.logs.unshift({ time, message, type })
      if (this.logs.length > 20) {
        this.logs.pop()
      }
    },

    clearLogs() {
      this.logs = []
    },

    async testLogin() {
      this.addLog('开始测试登录...', 'info')
      try {
        const result = await this.userStore.loginUser({
          username: this.testUsername,
          password: this.testPassword
        })
        
        if (result.success) {
          this.addLog('登录成功: ' + result.message, 'success')
          ElMessage.success('登录成功')
        } else {
          this.addLog('登录失败: ' + result.message, 'error')
          ElMessage.error(result.message)
        }
      } catch (error) {
        this.addLog('登录异常: ' + error.message, 'error')
        ElMessage.error('登录异常')
      }
    },

    async testRegister() {
      this.addLog('开始测试注册...', 'info')
      try {
        const result = await this.userStore.registerUser({
          username: this.testRegUsername,
          password: this.testRegPassword,
          confirmPassword: this.testRegPassword,
          phoneNumber: this.testRegPhone,
          verificationCode: this.testRegCode
        })
        
        if (result.success) {
          this.addLog('注册成功: ' + result.message, 'success')
          ElMessage.success('注册成功')
        } else {
          this.addLog('注册失败: ' + result.message, 'error')
          ElMessage.error(result.message)
        }
      } catch (error) {
        this.addLog('注册异常: ' + error.message, 'error')
        ElMessage.error('注册异常')
      }
    },

    async testGetCode() {
      this.addLog('开始获取验证码...', 'info')
      try {
        const result = await this.userStore.getCode(this.testPhone)
        
        if (result.success) {
          this.addLog('验证码发送成功: ' + result.message, 'success')
          ElMessage.success('验证码发送成功')
        } else {
          this.addLog('验证码发送失败: ' + result.message, 'error')
          ElMessage.error(result.message)
        }
      } catch (error) {
        this.addLog('验证码发送异常: ' + error.message, 'error')
        ElMessage.error('验证码发送异常')
      }
    },

    testUpdateUserInfo() {
      this.addLog('开始更新用户信息...', 'info')
      try {
        this.userStore.updateUserInfo({
          nickname: '测试昵称' + Date.now(),
          avatar: 'test-avatar.jpg',
          lastUpdate: new Date().toISOString()
        })
        this.addLog('用户信息更新成功', 'success')
        ElMessage.success('用户信息更新成功')
      } catch (error) {
        this.addLog('用户信息更新失败: ' + error.message, 'error')
        ElMessage.error('用户信息更新失败')
      }
    },

    async testAutoLogin() {
      this.addLog('开始测试自动登录...', 'info')
      try {
        const success = await this.userStore.autoLogin()
        if (success) {
          this.addLog('自动登录成功', 'success')
          ElMessage.success('自动登录成功')
        } else {
          this.addLog('自动登录失败', 'error')
          ElMessage.error('自动登录失败')
        }
      } catch (error) {
        this.addLog('自动登录异常: ' + error.message, 'error')
        ElMessage.error('自动登录异常')
      }
    },

    testLogout() {
      this.addLog('开始测试登出...', 'info')
      try {
        this.userStore.logout()
        this.addLog('登出成功', 'success')
        ElMessage.success('登出成功')
      } catch (error) {
        this.addLog('登出失败: ' + error.message, 'error')
        ElMessage.error('登出失败')
      }
    }
  }
}
</script>

<style scoped>
.test-pinia {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h2 {
  color: #2563eb;
  text-align: center;
  margin-bottom: 30px;
}

h3 {
  color: #374151;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

h4 {
  color: #6b7280;
  margin-bottom: 15px;
}

.status-section, .user-details, .actions-section, .log-section {
  margin-bottom: 30px;
}

.status-info p {
  margin: 8px 0;
  padding: 8px;
  background: #f9fafb;
  border-radius: 4px;
}

.user-details pre {
  background: #f3f4f6;
  padding: 15px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 12px;
}

.action-group {
  margin-bottom: 25px;
  padding: 15px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fafafa;
}

.form-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.input-field {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 14px;
  min-width: 150px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.btn-primary { background: #2563eb; color: white; }
.btn-primary:hover { background: #1d4ed8; }

.btn-success { background: #059669; color: white; }
.btn-success:hover { background: #047857; }

.btn-info { background: #0891b2; color: white; }
.btn-info:hover { background: #0e7490; }

.btn-warning { background: #d97706; color: white; }
.btn-warning:hover { background: #b45309; }

.btn-secondary { background: #6b7280; color: white; }
.btn-secondary:hover { background: #4b5563; }

.btn-danger { background: #dc2626; color: white; }
.btn-danger:hover { background: #b91c1c; }

.btn-sm {
  padding: 4px 8px;
  font-size: 12px;
}

.log-container {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 10px;
  background: #f9fafb;
}

.log-item {
  padding: 5px 10px;
  margin-bottom: 5px;
  border-radius: 4px;
  font-size: 12px;
  display: flex;
  gap: 10px;
}

.log-item.info {
  background: #dbeafe;
  color: #1e40af;
}

.log-item.success {
  background: #d1fae5;
  color: #065f46;
}

.log-item.error {
  background: #fee2e2;
  color: #991b1b;
}

.log-time {
  font-weight: bold;
  min-width: 80px;
}

.log-message {
  flex: 1;
}
</style> 